<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>角色管理</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all">
</head>

<body>
  <div class="layui-fluid">
    <div class="layui-card">
      <div class="layui-card-body">
        <div style="padding-bottom: 10px">
          <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">
              <div class="layui-inline">
                <label class="layui-form-label">搜索框</label>
                <div class="layui-input-block">
                  <input type="text" name="match" placeholder="请输入角色名或描述" autocomplete="off" class="layui-input"
                    style="width:500px">
                </div>
              </div>
              <div class="layui-inline">
                <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="roleParamQuery">
                  <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                </button>
              </div>
              <div class='layui-inline' style='float:right'>
                <button class="layui-btn layuiadmin-btn-role" data-type="add">添加</button>
              </div>
            </div>
          </div>
        </div>

        <table id="user-role-data-form" lay-filter="user-role-data-form"></table>
        <script type="text/html" id="toolbar">
          <div class="layui-btn-container">
              <button class="layui-btn layui-btn-sm" lay-event="edit">编辑</button>
              <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">删除</button>
          </div>
      </script>
      </div>
    </div>
  </div>

  <script src="../../../layuiadmin/layui/layui.js"></script>
  <script>
    layui.config({
      base: '../../../layuiadmin/' //静态资源所在路径
    }).extend({
      index: 'lib/index' //主入口模块
      , my_send: '../myModules/my_send'
    }).use(['index', 'useradmin', 'table', 'my_send'], function () {
      var $ = layui.$
        , form = layui.form
        , table = layui.table
        , http_proxy = layui.http_proxy
        , my_send = layui.my_send;

      //搜索角色
      form.on('submit(roleParamQuery)', function (data) {
        //执行重载
        table.reload('roleTable', {
          where: data.field
        });
        debugger
      });

      table.render({
        elem: '#user-role-data-form'
        , id: 'roleTable'
        , height: 500
        , url: http_proxy('/role/getRoleByParams') //数据接口
        , page: true //开启分页
        , method: 'post'
        , cols: [[ //表头
          { type: 'numbers', title: '序号', width: '5%', fixed: 'left', unresize: true }
          , { field: 'urid', hide: true }
          , { field: 'roleName', title: '名称', width: '20%', align: 'center', unresize: true }
          , { field: 'roleCode', title: 'code', width: '20%', align: 'center', unresize: true }
          , { field: 'roleDescribe', title: '描述', width: '45%', align: 'center', unresize: true }
          , { fixed: 'right', title: '操作', width: '10%', align: 'center', toolbar: '#toolbar', unresize: true }
        ]]
        , response: {
          countName: 'total' //规定数据总数的字段名称，默认：count
          , dataName: 'rows' //规定数据列表的字段名称，默认：data
        }
      });

      //添加
      $('.layui-btn.layuiadmin-btn-role').on('click', function () {
        layer.open({
          type: 2
          , title: '添加新权限'
          , content: 'roleform.html'
          , area: ['500px', '350px']
          , btn: ['确定', '取消']
          , yes: function (index, layero) {
            var iframeWindow = window['layui-layer-iframe' + index]
              , submit = layero.find('iframe').contents().find("#user-role-submit");

            //监听提交
            layerM(iframeWindow, index)

            submit.trigger('click');
          }
        });
      });

      table.on('tool(user-role-data-form)', function (obj) {
        var data = obj.data;
        var event = obj.event;

        var urid = data.urid
          , roleName = data.roleName
          , roleCode = data.roleCode
          , roleDescribe = data.roleDescribe
          , field = {};

        if (event === 'delete') { //删除
          layer.confirm('真的删除行么', function (index) {
            obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
            layer.close(index);
            //向服务端发送删除指令
            my_send({
              url: '/role/deleteRole'
              , type: 'post'
              , data: { 'urid': urid }
              , success: function (obj) {
                table.reload('roleTable');
              }
            });
          });
        } else if (event === 'edit') { //编辑
          //do something

          layer.open({
            type: 2
            , title: '修改角色'
            , content: 'roleform.html?mpids=' + urid
            , area: ['500px', '350px']
            , btn: ['确定', '取消']
            , yes: function (index, layero) {
              var iframeWindow = window['layui-layer-iframe' + index]
                , submit = layero.find('iframe').contents().find("#user-role-submit");

              //监听提交
              layerM(iframeWindow, index, urid);

              submit.trigger('click');
            }
          });
        }
      })

      var layerM = function (iframeWindow, index, urid) {
        //基本数据页面
        iframeWindow.layui.form.on('submit(user-role-submit)', function (data) {
          field = data.field; //获取提交的字段

          layer.style(index, {
            width: '555px',
            height: '550px'
          }); 
          if (urid) {
            layer.iframeSrc(index, "roleMenus.html?urid=" + urid);
          } else {
            layer.iframeSrc(index, "roleMenus.html");
          }

          return false;
        });

        //菜单页面
        iframeWindow.layui.form.on('submit(user-role-menus-submit)', function (data) {
          var selectedMenus = iframeWindow.layui.dtree.getCheckbarNodesParam("menusTree");
          var menuId = []
          for (var menus of selectedMenus) {
            menuId.push(menus.nodeId);
          }

          //必须为角色选择至少一个菜单页面
          if (menuId.length === 0) {
            layer.msg('必须至少选择一个菜单页面');
          } else {
            layer.style(index, {
              width: '1000px',
              height: '650px'
            }); 
            if (urid) {
              layer.iframeSrc(index, "rolePermission.html?urid=" + urid + "&menuId=" + menuId);
            } else {
              layer.iframeSrc(index, "rolePermission.html");
            }
          }

          return false;
        });

        //权限页面
        iframeWindow.layui.form.on('submit(user-role-permission-submit)', function (data) {
          var mpids = [];
          $.each(iframeWindow.layui.transfer_old.data, function (i, n) {
            if (n.id === "right-table-1") {
              $.each(n.data, function (i, n) {
                mpids.push(n.mpid);
              })
            }
          })

          //必须为角色选择至少一个权限
          if (mpids.length === 0) {
            layer.msg('必须至少选择一个权限');
          } else {
            field.mpids = mpids;
            if (urid) {
              my_send({
                url: '/role/updateRole'//更新角色基本信息
                , type: 'post'
                , data: field
              })
            } else {
              my_send({
                url: '/role/addRole'//新增角色基本信息
                , type: 'post'
                , data: field
                , success: function (obj) {
                  table.reload('roleTable');
                }
              })
            }
            layer.close(index); //关闭弹层
          }

          return false;
        });
      }
    });
  </script>
</body>

</html>